<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>市政审批情况</title>
  <link rel="stylesheet" href="/framework-ui/src/main/resources/static/agcloud/framework/js-lib/element-2/element.css"
        th:href="@{/agcloud/framework/js-lib/element-2/element.css}">
  <link rel="stylesheet" href="../../static/civicism/css/reset_wt.css" th:href="@{/civicism/css/reset_wt.css}">
  <link rel="stylesheet" href="../../static/civicism/css/base_wt.css" th:href="@{/civicism/css/base_wt.css}">
  <link rel="stylesheet" href="../../static/searchTable/css/search-table.css" th:href="@{/searchTable/css/search-table.css}">
  <link rel="stylesheet"
        href="/framework-ui/src/main/resources/static/agcloud/framework/icon-lib/agcloud-fonts/iconfont.css"
        th:href="@{/agcloud/framework/icon-lib/agcloud-fonts/iconfont.css}">
  <link rel="stylesheet" href="../../static/civicism/css/city-policy-approve.css" th:href="@{/civicism/css/city-policy-approve.css}">
  <script>
    var ctx = "[[@{/}]]";
  </script>
</head>
<body>
<div
        class="wt-tab effectStatistics"
        id="effectStatistics"
        v-cloak
        v-loading="loading">

  <div class="flex-box bg-white effectStatistics-top">
    <p class="flex-1 font-24 city-name">
      <span>{{dicRegionFirst.regionName}}</span>
      <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                  <span>{{searchForm.curRegion}}</span>
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
        <el-dropdown-menu class="region-drop" slot="dropdown">
          <el-dropdown-item :class="searchForm.regions.indexOf(item.regionId)!==-1&&'active'" :command="item" v-for="(item, index) in dicRegions" :key="index">{{item.regionName}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </p>
    <div class="flex-box mr15">
      <div class="top-time" v-show="startTime&&endTime">
        <p>统计时间为{{startTime}}至{{endTime}}</p>
      </div>
      <el-button-group class="date-type">
        <el-button :class="dateActive === 'all'&&'date-active'" @click="changeDate('all')">总览</el-button>
        <el-button :class="dateActive === 'month'&&'date-active'" @click="changeDate('month')">本月</el-button>
        <el-button :class="dateActive === 'quarter'&&'date-active'" @click="changeDate('quarter')">本季度</el-button>
        <el-button :class="dateActive === 'year'&&'date-active'" @click="changeDate('year')">本年</el-button>
      </el-button-group>
      <div class="date-picker flex-box">
        <el-date-picker
                v-model="startTime"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                :clearable="false"
                :picker-options="startPickerOptions"
                @change="changeDate('dateRange')">
        </el-date-picker>
        <span class="range-separator">至</span>
        <el-date-picker
                v-model="endTime"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                :picker-options="endPickerOptions"
                @change="changeDate('dateRange', 'endTime')">
        </el-date-picker>
      </div>
    </div>
  </div>

  <div class="wt-content">

    <div class="statis-con" v-loading="banjianLoading">
      <p class="title-p">
        审批概况
      </p>
      <ul class="flex-box statis-box">
        <li class="statis-item" v-for="(item ,index) in civicismApproveOverView" :key="index" style="position: relative;">
          <p class="statis-categoryType" v-if="item.categoryType ==='01'">供水报装</p>
          <p class="statis-categoryType" v-else-if="item.categoryType ==='02'">供电报装</p>
          <p class="statis-categoryType" v-else-if="item.categoryType ==='03'">燃气报装</p>
          <p class="statis-categoryType" v-else>通信报装</p>
          <div class="right-tip">
              <div class="flex-box right-tip-1">
                <img class="icon" th:src="@{/civicism/images/city-policy-approve/edit1.png}">
                <span class="text">有外线工程</span>
                <span class="num" v-text="item.outLineCompleteNum"></span>
                <span class="percent"  v-if="item.outLineCompletePercent"  v-text="item.outLineCompletePercent+'%'"></span>
                <span class="percent" v-else>0%</span>
              </div>
              <div class="flex-box right-tip-2">
                <img class="icon" th:src="@{/civicism/images/city-policy-approve/edit2.png}">
                <span class="text">无外线工程</span>
                <span class="num" v-text="item.unOutLineCompleteNum"></span>
                <span class="percent" v-if="item.unOutLineCompletePercent" v-text="item.unOutLineCompletePercent+'%'"></span>
                <span class="percent" v-else>0%</span>
              </div>
          </div>
          <div :id="'pie'+index" style="height: 183px;">
          </div>
        </li>
      </ul>
    </div>

    <!--审批用时-->
    <div class="approve-position" v-loading="banjianLoading">
      <p class="title-p">审批用时
        <span class="custom-legend"><i class="dot bg-179BFF"></i>平均审批时间</span>
        <span class="custom-legend"><i class="dot bg-5AD8A6"></i>平均跨度时间</span>
        <span class="custom-legend"><i class="dashed"></i>承诺审批用时</span>
        <span class="custom-legend"><i class="line"></i>逾期率</span>
      </p>
      <div class="">
        <p class="category-title">供水报装</p>
        <div class="approve-time-water flex-box" style="width: 100%;">
          <div class="approveTime-chart-unoutline" style="width: 100%;" >
            <div id="approveTime-chart-water-unoutline" style="width:100%;height: 330px"></div>
            <p class="category-bottom-title"><span>——</span> 无外线工程 <span>——</span></p>
          </div>
          <div class="approveTime-chart-outline" style="width: 100%;">
            <div id="approveTime-chart-water-outline" style="width:100%;height: 330px"></div>
            <p class="category-bottom-title"><span>——</span> 有外线工程 <span>——</span></p>
          </div>
        </div>
        <div class="approve-time-electric" style="width: 100%;">
          <p class="category-title">供电报装</p>
            <div class="flex-box">
              <template v-for="(item ,index) in electric">
                <div style="width:100%;">
                  <div :id="'approveTime-chart-electric'+index" style="width:100%;height: 330px"></div>
                  <p class="category-bottom-title"><span>——</span> {{item.stateName}} <span>——</span></p>
                </div>
              </template>
            </div>
        </div>
        <p class="category-title">供气报装</p>
        <div class="approve-time-gas flex-box" style="width: 100%;">
          <div class="approveTime-chart-unoutline"  style="width: 100%;">
            <div id="approveTime-chart-gas-unoutline" style="width:100%;height: 330px"></div>
            <p class="category-bottom-title"><span>——</span> 无外线工程 <span>——</span></p>
          </div>
          <div class="approveTime-chart-outline" style="width: 100%;">
            <div id="approveTime-chart-gas-outline" style="width:100%;height: 330px"></div>
            <p class="category-bottom-title"><span>——</span> 有外线工程 <span>——</span></p>
          </div>
        </div>
      </div>
    </div>

    <!--外线审批详情--->
    <div class="mt24 packaging-detail-box">
      <p class="title-p">报装办件详情</p>
      <div class="content">
        <div class="search-box flex-box">
          <div class="flex-box">
            <div class="item flex-box" style="margin-left: 0px;">
              <div class="mr10" style="width:73px;">关键字查询</div>
              <el-input placeholder="请输入流水号、项目代码、项目名称等关键字" style="width:430px;" v-model="search.keyword" @change="resetPagination"></el-input>
            </div>
            <div class="item flex-box">
              <div  class="mr10" style="width: 60px;">报装类型</div>
              <el-select  clearable multiple  placeholder="请选择"  style="width: 280px" v-model="search.categoryTypes" @change="resetPagination">
                <el-option
                        v-for="item in categoryType"
                        :key="item.name"
                        :label="item.label"
                        :value="item.name">
                </el-option>
              </el-select>
            </div>
            <div class="item flex-box">
              <div  class="mr10" style="width: 60px;">当前环节</div>
              <el-select v-model="search.taskDefKeys"  clearable multiple placeholder="请选择" style="width: 280px" @change="resetPagination">
                <el-option
                        v-for="item in taskDefKeyOptionData"
                        :key="item.itemCode"
                        :label="item.itemName"
                        :value="item.itemCode">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="search-btn-box">
            <el-button type="primary" @click="resetPagination()">查询</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </div>
        </div>
        <div class="table">
          <el-table :data="listCivicismApplyData" style="width:100%" border>
            <el-table-column type="index" label="序号" width="50"  align="center">
            </el-table-column>
            <el-table-column prop="applyinstCode" label="申报流水号" width="140">
            </el-table-column>
            <el-table-column prop="" label="项目名称 | 项目代码" width="260">
              <template slot-scope="scope">
                <el-tooltip placement="top" effect="dark">
                  <div slot="content" style="width: 390px;line-height: 22px;">
                    <p class="tooptip-content"><span>项目/工程名称：</span>{{scope.row.projName}}</p>
                    <p class="tooptip-content"><span>工程代码：</span>{{scope.row.localCode}}</p>
                  </div>
                  <div>
                    <div class="ellipsis pro-name">{{scope.row.projName}}</div>
                    <div>{{scope.row.localCode}}</div>
                  </div>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column label="报装类型" prop="categoryTypeName" min-width="110">
              <template slot-scope="scope">
             <!--   <span v-if="scope.row.categoryTypeName">{{scope.row.categoryTypeName}}</span>-->
                 <span v-if="scope.row.itemCategoryType === '01'">用水报装</span>
                 <span v-else-if="scope.row.itemCategoryType === '02'">用电报装</span>
                 <span v-else-if="scope.row.itemCategoryType === '03'">用气报装</span>
                 <span v-else-if="scope.row.itemCategoryType === '04'">通信报装</span>
                <span v-else>暂无</span>
              </template>
            </el-table-column>
            <el-table-column prop="regionName" label="行政区划" width="100">
            </el-table-column>
            <el-table-column prop="applicant" min-width="170" label="建设单位">
              <template slot-scope="scope">
                <el-tooltip placement="top" effect="dark">
                  <div slot="content" style="width: 320px;line-height: 22px;">
                    <p class="tooptip-content">{{scope.row.applicant}}</p>
                  </div>
                  <div>
                    <div class="ellipsis pro-name">{{scope.row.applicant}}</div>
                  </div>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="nodeName" label="当前环节" width="100"></el-table-column>
            <el-table-column prop="unitName" min-width="120" label="剩余时限">
              <template slot-scope="scope">
                <div v-if="scope.row.instState">
                    <span :class="{'red-span':scope.row.instState === '3'}" class="timelimit-span">
                        {{scope.row.instState === '3' ? ('逾期' + scope.row.overdueTime + '个工作日') : ('剩余'+ scope.row.remainingTime+'个工作日')}}
                    </span>
                </div>
                <div v-else>
                  -
                </div>
              </template>
            </el-table-column>

            <el-table-column fixed="right" label="操作" align="center">
              <template slot-scope="scope">
                <span class="option-btn">
                    <a href="javascript:;" @click="toDetail(scope.row)">查看</a>
                </span>
                <span class="option-btn">
                   <i  class="el-icon-loading" v-if="scope.row.loading"></i>
                   <a href="javascript:;" v-else  @click="sendRemind(scope.row)">催办</a>
                </span>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination v-show="total>5"  style="marginTop: 15px;" background align="right" :page-size="search.pagination.perpage"
                         :current-page="search.pagination.page" @size-change="handleSizeChange"
                         @current-change="handleCurrentChange" :page-sizes="[5, 10, 15 , 20]"
                         layout="total,sizes, prev, pager, next, jumper" :total="total" :hide-on-single-page="true">
          </el-pagination>
        </div>
      </div>
    </div>

  </div>

</div>



<script src="/framework-ui/src/main/resources/static/agcloud/framework/js-lib/jquery-v1/jquery.min.js" th:src="@{/agcloud/framework/js-lib/jquery-v1/jquery.min.js}"></script>
<script src="/framework-ui/src/main/resources/static/agcloud/framework/js-lib/vue-v2/vue.js" th:src="@{/agcloud/framework/js-lib/vue-v2/vue.js}"></script>
<!-- 引入组件库 -->
<script src="/framework-ui/src/main/resources/static/agcloud/framework/js-lib/element-2/element.js" th:src="@{/agcloud/framework/js-lib/element-2/element.js}"></script>
<script src="/framework-ui/src/main/resources/static/agcloud/framework/js-lib/agcloud-lib/js/common.js" th:src="@{/agcloud/framework/js-lib/agcloud-lib/js/common.js}"></script>
<script src="../../../../../static/agcloud/opus/admin/common/js/axios.min.js" type="text/javascript" th:src="@{/agcloud/opus/admin/common/js/axios.min.js}"></script>


<script th:src="@{/agcloud/framework/js-lib/echarts-v4/echarts.min.js}"></script>
<script src="../../static/civicism/js/city-policy-approve.js" th:src="@{/civicism/js/city-policy-approve.js}" type="text/javascript"></script>

</body>
</html>